<template>
    <my-dialog class="dialog-clause" v-model="model" :title="title">
        <div 
            ref="html"
            class="clause-html" 
            v-html="content"
            @scroll="scrollHandler"
        ></div>

        <div class="btn" v-if="agree">
            <el-button type="primary" :disabled="btnDisabled" @click="agreeHandler">
                同意并继续
            </el-button>
        </div>
    </my-dialog>
</template>

<script>
import MODEL_MIXIN from '@mixins/model';

export default {
    mixins: [MODEL_MIXIN],
    props: {
        value: {
            type: Boolean,
            default: false,
        },
        title: {
            type: String,
            default: '',
        },
        type: {
            type: String,
            default: '',
        },
        agree: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            btnDisabled: true,

            content: ``,
        };
    },
    watch: {
        model(val) {
            if (!val) return;

            this.$nextTick(() => {
                this.scrollHandler({
                    target: this.$refs.html,
                });
            });
        },
    },
    methods: {
        scrollHandler(e) {
            if (!this.agree) {
                return;
            }

            var target = e.target,
                delta = 5;

            if (target.scrollTop + target.clientHeight + delta >= target.scrollHeight) {
                this.btnDisabled = false;
            } else {
                this.btnDisabled = true;
            }
        },
        agreeHandler() {
            this.$emit('click');
        },
        queryData() {
            if (!this.type) return;
            return;
            this.$get(
                `${this.$store.state.api.webUrl}/infomation/detail.json`,
                {
                    type: this.type,
                },
                (data) => {
                    this.content = data.content;
                }
            );
        },
    },
    mounted() {
        this.queryData();
    },
};
</script>

<style scoped lang="scss">
.dialog-clause {
    ::v-deep {
        .el-dialog__header {
            background: #f4f4f4;
        }
    }

    .clause-html {
        height: 600px;
        overflow: auto;
    }

    .btn {
        text-align: center;
    }
}
</style>